*,
*::before,
*::after {
  box-sizing: border-box;
   color:#3288eb;  
}
html {
             box-sizing: border-box;
            }

body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  background: #2a8dff25;
  padding-bottom: 90px;
}

.element{
    color: #3288eb;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    
}



/**************HEADER**************/
.element-1{
    background-color: #021224;
    width: 100%;
    grid-column: 1/11;
    grid-row: 1/4;
}
.imagen1 {
    
    height: 100px;
    width: 210px;
    grid-row: 4/4;
    border-radius: 20px 0px 20px 0px;
}
.img {
    height: 60px;
    width: 60px;
    margin-top: 2px;
    margin-right: 2px;
    /*border-radius: 50%;
    background-color: #fff;*/
      border-radius: 20px 0px 20px 0px;
}
.imagen2 {
	padding: 1px;
	text-align: left;
	height: 100%;
	width: 180px;
	/*flex-shrink: 0;*/
	background: #021224;
	max-width: 100% !important;
    overflow-x: hidden !important;
    z-index: 9999999;
}

.imagen2 img {
    height: 100px;
    width: 120px;
    position: relative;
    z-index: 10005;
}

header {
            /*background: linear-gradient(135deg, #021224 0%, #021224 100%);*/
            color: #3288eb;
            background: #021224;
            padding: 1rem 2rem 0;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            /*position: sticky;*/
            top: 0;
            /*z-index: 1000;*/
            box-shadow: 0 2px 10px rgba(31, 165, 19, 0.1);
            height: 80px;
            padding: 2px;
            margin: none;
            width: 100%;
            font-size:  13px;
            text-decoration: none;
            position: fixed;
            /*display: grid;*/
            /*columnas repeat(cant columnas, fraccion)*/
           /* grid-template-columns: repeat(11,1fr);*/
            /*filas repeat(cant filas, fraccion)
            tambien puede escribirse valor por fila: 100px 10em 1fr*/
            /*grid-template-rows: repeat(80,20px);*/

        }
           
        nav {
               display: flex;
                align-items: end;
                flex-basis: 300px;
                padding: 35px;
            }
            nav a{
                
                color:#3288eb;
                text-decoration: none;
            }
            nav a:hover{
                color: rgb(66, 195, 247);
            }      
     
        .nav-menu {
            list-style: none;
            display: flex;
            gap: 1.5rem;   /* separa as pestañas*/
            margin-right: 200px;
            position: sticky;
        }
        .nav-menu a {
            color:#021730;
            text-decoration: none;
            padding: 0.5rem 1.2rem;
            background-color: #fff;
            border-radius: 18px 18px 0 0;
            transition: all 0.3s ease;
            display: inline-block;
            transform: translateY(38px);
            border-bottom: 3px solid transparent;
        }
        .nav-menu a:hover {
            border-bottom-color: #fff;
            transform: translateY(35px);
        }

        /* Botón hamburguesa (oculto en desktop) */
        .menu-toggle {
            display: none;
            cursor: pointer;
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
        }
        
        .menu-toggle span {
            width: 100%;
            height: 3px;
            background-color: white;
            border-radius: 3px;
            transition: all 0.3s ease;
        }
        
        /* fin menu hamburguesa*/



/***********MAIN***********/

main {
	display: flex;
    text-align: left;
    
}
.main-content {
            max-width: 800px;
            width: 100%;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            border-radius: 48px;
            padding: 40px 40px 30px 40px;
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
			/*max-width: 100% !important;*/
    		overflow-x: hidden !important;
			margin-left: 50px;
            margin-top: 190px; /* o padding-top: 20px; */
  			scroll-margin-top: 100px; /* si usas anclas */
}


.main-content2 {
            max-width: 720px;
            width: 100%;
            background: white;
            border-radius: 2rem;
            box-shadow: 0 25px 45px -12px rgba(0,0,0,0.25);
            overflow: hidden;
        }
        .info-text {
            background: #d6e1fcf3;
            padding: 1.8rem;
            text-align: center;
            font-size: 1.8rem;
            font-weight: 600;
            color: rgb(30, 131, 199);
            border-bottom: 3px solid #7d8fb962;
        }
        .info-text2 {
            background: #d6e1fcf3;
            padding: 1.8rem;
            text-align: center;
            font-size: 1.0rem;
            font-weight: 600;
            color: rgb(30, 131, 199);
            border-bottom: 3px solid #7d8fb962;
        }

        .c1 {
            display: block;
            /*float: inline-start;*/
            height: auto;
            width: auto;
            text-align: center;
            margin-top: 30px;
            font-size: 16px;
            color: #010b1b;
        }

        .main-content2 p2 {
            display: block;
            height: auto;
            width: auto;
            text-align: justify;
            font-size: 16px;
            margin-left: 30px;
            margin-right: 30px;
            margin-bottom: 30px;
            margin-top: 30px;
        }

        .main-content2 img {
            display: block;
            float: center;
            height: 280px;
            width: 150px;
            margin-top: 30px;
            margin: auto;
            align-items: center;
        }



        .contact-form {
            padding: 2rem;
            
        }
        .contact-form form {
            display: flex;
            flex-direction: column;
            gap: 1.2rem;
            
        }
        .contact-form label {
            font-weight: 600;
            color: #0a1f41;
        }
        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 0.9rem 1.2rem;
            border: 1.5px solid #e2e8f0;
            border-radius: 1.2rem;
            font-family: inherit;
            font-size: 1rem;
            transition: 0.2s;
        }
        .contact-form input:focus,
        .contact-form textarea:focus {
            border-color: #8a5c3c;
            outline: none;
            box-shadow: 0 0 0 3px rgba(6, 24, 56, 0.61);
        }
        .contact-form button {
            background: #145480;
            color: white;
            font-weight: bold;
            padding: 0.9rem;
            border: none;
            border-radius: 2rem;
            font-size: 1rem;
            cursor: pointer;
            transition: 0.2s;
        }
        .contact-form button:hover {
            background: #1e9cb3;
            transform: translateY(-2px);
        }








.c img {
    display: flexbox;
    float: inline-start;
    height: 120px;
    width: 120px;
    margin-top: 20px;
    margin-left: 80px;
}







.c1 img {
    display: flexbox;
    float: inline-start;
    height: 120px;
    width: 120px;
    margin-top: 20px;
    margin-left: 80px;
}

.titulo {
    background-color: #021224;
}

h2 {
    color: #48b2e4;
    background-color: #021224;
    font-family: 'Times New Roman', Times, serif;
    font-size: 35px;
    font-weight: bold;
    text-align: center;
    display: grid;
    grid-column: 1/11;
    grid-row: 5/6;
    /*align-items: flex-end;
    justify-content: space-between;*/
}



footer {
	display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
	font-size:  12px;
    font-family: 'Times New Roman', Times, serif ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #021224;
	height: 70px;
	padding-bottom: 20px;
	z-index: 1000;
	max-width: 100% !important;
    overflow-x: hidden !important;
}
.imagen3 {
	display: flex;
	text-align: center;
	height: 40px;
	width: 40px;
	margin-top: 2px;
	flex-direction: row;
	justify-content: space-between;
}
.flex-fo {
	display: flex;
    margin-top: 20px;
    flex-direction: row;
    width: 200px;  
    color:#3288eb;
	text-align: center;  
	justify-content: space-between;
}




/********************************************************************************************/
/********************************************************************************************/

/* Responsive móvil */
        @media (min-width: 0px) and (max-width: 480px) {
            *,
            *::before,
            *::after {
            box-sizing: inherit;
            }
            html {
             box-sizing: border-box;
            }
            .body {
                margin: 0;
                padding: 0;
                width: 100%;
                max-width: 100%;
                
                font-family: 'Segoe UI', sans-serif;
                /*display: flex;*/
                flex-direction: row;   
                /*width: 1800px; */
                height: 100%;
                /*position: fixed;*/
                padding-bottom: 90px;
                /*width: 100%;
                height: 100%;*/
                /*outline: 0px solid;*/
                background-color: rgb(255, 255, 255);
                /*display: flex;*/
                /*flex-direction: row
                grid-template-columns: repeat(11,1fr);
                grid-template-rows: repeat(120,20px);*/
            }
            
            header {
                display: grid;
                flex-direction: column;
                /*justify-content: space-between;*/
                /*align-items: grid-start;*/
                width: 100%;
                max-width: 480px;
				/*height: 80px;*/
                position: relative;
				background-color: #021224 ;
                /*grid-column: 1/11; 
                grid-row: 1/3;*/
                grid-row: auto;
				grid-column: auto;
				
	        }
            .imagen1 img {
                /*display: inline-block;*/
                position: sticky;
                /*flex-shrink: 1;*/
				margin-right: 10px;
                padding-bottom: 1px;
				height: 170px;
				width: 160px;
                z-index: 9999;
            }
           .logo a {
                
                margin-bottom: 0;
                font-size: 1.5rem;
                margin-left: 5px;
            }
            .menu-toggle { display: flex; }
                #nav-menu {
                /*position: sticky;*/
                top: 100%;
                left: 0;
                width: 100%;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease;
				color:#021730;
                z-index: 9999;
            }
            #nav-menu.active { max-height: 100px;  }
            .nav-menu {
                flex-direction: row;
                /*gap: 10px;*/
                width: 100%;
                align-items: center;
                Justify-content: right; 
				margin-left: 100%;
                padding-bottom: 1px;
                /*height: 10px;*/
                text-align: center;
                color:#021730;
                z-index: 99999;
                /*position: sticky;*/
            }
            .nav-menu a {
                transform: none;
                border-radius: 15px;
                text-align: left;
                /*padding: 0.45rem;
                margin: 0.15rem 0;*/
                color:#021730;
            	text-decoration: none;
           		/*padding: 0.5rem 1.2rem;*/
           		background-color: #fff;
    			transform: translateY(38px);
           		border-bottom: 3px solid transparent;
			}
            .nav-menu a:hover {
                border-bottom-color: #fff;
	            transform: translateY(35px);
            }
            /* Animación hamburguesa */
            .menu-toggle.active span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }
            .menu-toggle.active span:nth-child(2) {
                opacity: 0;
            }
            .menu-toggle.active span:nth-child(3) {
                transform: rotate(-45deg) translate(7px, -6px);
            }

            /** FRASES SANTOS**/
            
            /** ACTIVIDADES**/
            .element-3 {
                grid-column: 1/11;
                    display: block;
                    gap: 16px; 
                    align-items:  
                    flex-start;

                grid-row: 12/46;
                align-items: center;
                Justify-content: space-between;
                margin-top: 2px;
                margin-bottom: 1px;
                margin-left: 30px;
            }


            /** FOOTER**/
            





       }
        /*fin responsive movil */














/*************Ocultar scrollbars en Chrome, Edge y Safari ****/
.imagen2::-webkit-scrollbar { width: 0px; background: transparent;}
footer::-webkit-scrollbar { width: 0px; background: transparent;}
header::-webkit-scrollbar {    width: 0px;  background: transparent;}
html::-webkit-scrollbar { width: 0px;  background: transparent;}
/* Opcional: para Firefox */
html { scrollbar-width: none;}
/******************************/


/**
@media screen and (max-width: 1470px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .element-1 { grid-row: 1; grid-column: 1/7; }
  .header    { grid-row: 1; grid-column: 1/7; }
  .element-6 { grid-row: 5; grid-column: 1/7; }
  .element-3 { grid-row: 12; grid-column: 1/7; }
  .element-4 { grid-row: 85; grid-column: 1/7;  }
  .element-2 { grid-row: 100; grid-column: 1/7; }
  .element-5 { grid-row: 6; grid-column: 1/7; }
  .element-7 { grid-row: 130; grid-column: 1/7; }
  .footer    { grid-row: 6/7; grid-column: 2/6; grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width: 800px) {
    .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .element-1 { grid-row: 2/2; grid-column: 1/2; }
  .header    { grid-row: 2/2; grid-column: 1/2; }
  .element-6 { grid-row: 10; grid-column: 1/2; }
  .element-3 { grid-row: 24; grid-column: 1/2; }
  .element-4 { grid-row: 85; grid-column: 1;flex-direction: column; }
  .element-2 { grid-row: 6; grid-column: 1; }
  .element-5 { grid-row: 7; grid-column: 1; }
  .element-7 { grid-row: 8; grid-column: 1; }
  .footer    {  grid-row: 6/7; grid-column: 2/6; grid-template-columns: repeat(1, 1fr); }
  
   Aquí solo pon ajustes de tamaño de texto o padding si los necesitas 
}**/